.section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

  .aside {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // width:@aside-width;

    &-logo {
      width: 45px;
      height: 45px;
      margin: 0 auto;
      background: url(../../images/logo.png) no-repeat center center;
      background-size: 100% auto;
    }

    &-body {
      position: relative;
      width: 100%;
      height: 100%;
    }

    &-tab {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 10000;
      width: @aside-width;
      background-color: #61B3D7;
      // box-shadow:3px 0 5px rgba(0, 0, 0, 0.1);
      box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
    }

    &-panel {
      flex: 1;
      // position:absolute;
      // top:0;
      // // top:72px;
      // left:0;
      // right:0;
      // bottom:72px;
      padding: 25px 0;
      overflow: auto;

      &::-webkit-scrollbar {
        width: 3px;
        height: 6px;
      }

      // &::-webkit-scrollbar-track-piece {
      //   background-color: rgba(0, 0, 0, .25);
      // }

      // &::-webkit-scrollbar-thumb,
      // &::-webkit-scrollbar-thumb:horizontal,
      // &::-webkit-scrollbar-thumb:vertical {
      //   background-color: #076690;
      // }

      // &::-webkit-scrollbar-thumb:hover {
      //   background-color: #666666;
      // }
    }

    &-nav {
      margin-top: 32px;

      ul {
        margin: 0;
        padding: 0;
      }

      li,
      .nav-button {
        position: relative;
        margin: 5px 0;
        // padding:0 15px 0 12px;
        // border-left:3px solid transparent;
        // padding:0 12px;
        color: #FFFFFF;
        transition: color .5s;
        cursor: pointer;

        a {
          display: block;
          color: #FFFFFF;
          text-decoration: none;

          &:hover {
            color: #FFFFFF;
          }
        }

        .ico-nav,
        .ico-text {
          display: block;
        }

        .ico-nav {
          height: 70px;
          // padding:20px 0;
          // border-bottom:1px solid #2F3E4D;
          text-align: center;
          cursor: pointer;

          i, .fa {
            font-size: 24px;
            margin-top: 22px;
            transition: opacity .5s, -webkit-transform .5s;
            transition: transform .5s, opacity .5s;
            transition: transform .5s, opacity .5s, -webkit-transform .5s;
          }
        }

        .ico-text {
          height: 0;
          margin-top: 3px;
          font-size: 12px;
          white-space: nowrap;
          overflow: hidden;

          -webkit-transform: translateY(0);
          transform: translateY(0);
          transition: height .5s, -webkit-transform .5s;
          transition: height .5s, transform .5s;
          transition: height .5s, transform .5s, -webkit-transform .5s;
        }

        &:hover,
        &.hover,
        &.x-menu-item-selected,
        &.@{popbox-prefix-cls}-open {
          color: #FFFFFF;
          background-color: #419DC5;

          a {
            color: #FFFFFF;
          }
        }

        &:hover,
        &.hover,
        &.x-menu-item-selected {

          .ico-nav i, .ico-nav .fa,
          .ico-text {
            transform: translateY(-7px);
          }

          .ico-text {
            height: auto;
          }
        }

        &.hover,
        &.x-menu-item-selected {
          // border-color:#D75B5D;

          &:before {
            content: '\20';
            position: absolute;
            right: 0;
            top: 50%;
            width: 0;
            height: 0;
            margin-top: -6px;
            border-top: 6px solid transparent;
            border-right: 6px solid #FFFFFF;
            border-bottom: 6px solid transparent;
          }
        }
      }
    }

    &-footer {
      // position:absolute;
      // left:0;
      // right:0;
      // bottom:0;
      margin-top: 0;
      background-color: #61B3D7;

      li {
        .ico-nav {
          // border-top:1px solid #6C6C6E;
          border-bottom: none;
        }

        &:first-child .ico-nav {
          border-top: none;
        }
      }
    }
  }

  .primary {
    position: absolute;
    top:@header-toolbar-height;
    left: @aside-width;
    right: 0;
    bottom: 0;
  }
}

.x-fixed {
  .x-loading {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:100000;
    background-color:rgba(255, 255, 255, .3);

    &-nested-loading, &-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}

.x-container {
  .x-loading {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:100000;
    background-color:rgba(255, 255, 255, .3);
  }
  .@{list-prefix-cls}-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .@{list-prefix-cls} {
    // position: absolute;
    // top: 0;
    // left: 0;
    // right: 0;
    // bottom: 0;

    &-pagination {
      // position: absolute;
      // right: 0;
      // bottom: 0;
      position: fixed;
      right: @x-padding;
      bottom: @x-padding;
      z-index: 1;
    }
    &-placeholder {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}

.x-layout {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  
  .x-side {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    z-index:1;
    width:@x-side-width;
    border-top:2px solid #26ADCC;
    border-right:1px solid #DEDEDE;
    background-color:#FFFFFF;
    box-shadow:0 0 10px rgba(0, 0, 0, .1);
  }
  .x-main {
    position:absolute;
    top:0;
    left:@x-side-width;
    right:0;
    bottom:0;

    .x-loading {
      background-color:rgba(255, 255, 255, .1);
    }
  }
}